<!--预览-->
<nz-modal [(nzVisible)]="visible" nzTitle="预览" (nzOnCancel)="hidePreviewModal()" style="height: 400px">
  <div *nzModalContent>
    <div class="question" *ngFor="let question of showList;let questionIndex=index">
      <div *ngIf="question.show">
        <div class="title" (click)="changeFold(question)">
          <span class="name">{{calcQuestionIndex(questionIndex)}}.{{question.questionName}}
            <span *ngIf="question.isRequired" style="color: red">*</span></span>
          <span class="result">{{getResult(question)}}</span>
          <i class="changeFoldBtn" nz-icon [nzType]="question.optionsFold?'right':'down'" nzTheme="outline"></i>
        </div>
        <div class="optionSingle" [ngStyle]="{height: question.optionsFold?0:question.options.length*30+60+'px'}"
             *ngIf="question.selectType===0">
          <nz-radio-group [(ngModel)]="question.value" class="optionRow" *ngFor="let option of question.options"
                          (ngModelChange)="singleChecked(questionIndex,$event)">
            <label nz-radio [nzDisabled]="!option.selectAble" [nzValue]="option.id">{{option.optionName}}
              <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
                 nzType="question-circle" (click)="showOptionRemarkModal(question,option,$event)"
                 nzTheme="outline"></i>
              <br>
              <span style="color: red" *ngIf="!option.selectAble">不可选原因：{{option.invalidCause}}</span>
              <div *ngIf="option['questionId']" style="color: rgba(0,0,0,.3)">
                选择此项后跳转到：{{questionIdToName(option['questionId'], questionList)}}</div>
            </label>
          </nz-radio-group>
        </div>
        <div class="optionMultiple" [ngStyle]="{height: question.optionsFold?0:question.options.length*30+60+'px'}"
             *ngIf="question.selectType===1">
          <div class="optionRow" *ngFor="let option of question.options">
            <label nz-checkbox [(ngModel)]="option.checked" [nzDisabled]="!option.selectAble"
                   (click)="multipleChecked(questionIndex)">{{option.optionName}}
              <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
                 nzType="question-circle" (click)="showOptionRemarkModal(question,option,$event)"
                 nzTheme="outline"></i>
              <br>
              <span style="color: red" *ngIf="!option.selectAble">不可选原因：{{option.invalidCause}}</span>
            </label>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hidePreviewModal()">取消</button>
    <button nz-button nzType="primary" *ngIf="allRequiredIsChecked()">立即估价</button>
  </div>
</nz-modal>
